<template>
  <div class="tabDetail" :style="{ 'background-image': `url(${imgs[tabIndex].bg})` }">
     <goBack :title="tabIndex == 0
            ? '三位一体'
            : tabIndex == 1
              ? '强基计划'
              : tabIndex == 2
                ? '浙江新高考'
                : '高职提前批'"></goBack>
    <dev class="tabDetail-title">{{
        tabIndex == 0
          ? '三位一体'
          : tabIndex == 1
            ? '强基计划'
            : tabIndex == 2
              ? '浙江新高考'
              : '高职提前批'
    }}</dev>
    <dev class="tabDetail-subtitle">行之力则知愈进 知之深则行愈达</dev>
   
    <div class="san-box" v-for="item in info.news" :key="item">
      <div class="san-box-wrap" :style="{ 'background-image': `url(${imgs[tabIndex].banner})` }" >
        <div class="san-box-wrap-left">
          <img :src="item.coverimage" />
        </div>
        <div class="san-box-wrap-right">
          <div class="san-box-wrap-right-top">{{ item.titile }}</div>
          <div class="san-box-wrap-right-bot">
            {{ item.subtitle }}
          </div>
        </div>
        <div @click="goToZX(item.id)" class="san-box-wrap-top">查看详情</div>
      </div>
    </div>

    <div class="schools">
      <nav class="san-box-title">
        <span class="san-box-title-left">大学推荐 <p>&nbsp;| 更多大学等着你</p></span>
        <div class="san-box-title-right-2">
          <span @click="classMore">查看更多</span>
          <img src="../../assets/images/homepage-more.png" />
        </div>
      </nav>
      <div class="schools-wrap" v-for="item in info.schools" :key="item">
        <schoolProject :introduce="item" :bg="imgs[tabIndex].projectImg"></schoolProject>
      </div>
    </div>
    <div class="tabDetail1">
      <zixunLists :id="id"></zixunLists>
    </div>
  </div>
</template>

<script setup>
import { getTypeIndex } from '../../api/apiList/homePage.js';
import goBack from '../../components/goBack.vue';
import { useRoute,useRouter } from 'vue-router';
import { onMounted, ref, reactive } from 'vue';
import schoolProject from './components/schoolProject.vue';
import zixunLists from '../zixunList/components/zixunLists.vue';
import  tabDetailBg1 from '../../assets/images/tabDetail-bg1.png'
import  tabdetailBanner1 from '../../assets/images/tabdetail-banner1.png'
import  projectImg1 from '../../assets/images/tabdetail-projectImg1.png'
import  tabDetailBg2 from '../../assets/images/tabDetail-bg2.png'
import  tabdetailBanner2 from '../../assets/images/tabdetail-banner2.png'
import  projectImg2 from '../../assets/images/tabdetail-projectImg2.png'
import  tabDetailBg3 from '../../assets/images/tabDetail-bg3.png'
import  tabdetailBanner3 from '../../assets/images/tabdetail-banner3.png'
import  projectImg3 from '../../assets/images/tabdetail-projectImg3.png'
import  tabDetailBg4 from '../../assets/images/tabDetail-bg4.png'
import  tabdetailBanner4 from '../../assets/images/tabdetail-banner4.png'
import  projectImg4 from '../../assets/images/tabdetail-projectImg4.png'
const route = useRoute();
const tabIndex = route.query.tabIndex;
const id = route.query.id;
let info = ref({});
const imgs = [{
  bg: tabDetailBg1,
  banner: tabdetailBanner1,
  projectImg: projectImg1
},{
  bg: tabDetailBg2,
  banner: tabdetailBanner2,
  projectImg: projectImg2
},{
  bg: tabDetailBg4,
  banner: tabdetailBanner4,
  projectImg: projectImg4
},{
  bg: tabDetailBg3,
  banner: tabdetailBanner3,
  projectImg: projectImg3
}]

const router = useRouter();

onMounted(async () => {
  // 背景图改变
  
  // 获取列表数据
  await getTypeIndex(id).then((res) => {
    const { result } = res;
    info.value = result;
  });
});

const goToZX = (id) => {
  router.push({ path: '/InformationDetails', query: { id } });
};

const goback = () => {
  history.go(-1);
};

const classMore = () => {
  // 大学推荐0 
  router.push({ path: '/enrollment', query: { tabIndex: 1 } })
}

</script>

<style lang="less" scoped>

.tabDetail1 {
 display: flex;
  flex-direction: column;
  
}

.tabDetail {
  display: flex;
  flex-direction: column;
  padding: 0 21px;
  background-image: url('../../assets/images/tabDetail-bg.png');
  background-size: 100% 250px;
  background-repeat: no-repeat;

  .san-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .san-box-title-right-2 {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 20px;
      display: flex;
      align-items: center;

      img {
        width: 6px;
        height: 6px;
        margin-left: 6px;
      }
    }

    .san-box-title-left {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 33px;
      letter-spacing: 1px;

      p {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 33px;
        letter-spacing: 1px;
      }
    }

    .san-box-title-right {
      position: fixed;
      width: 121px;
      height: 32px;
      border-radius: 16px;
      right: 0;
      z-index: 999;

      img {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      span {
        position: relative;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 17px;
        z-index: 1;
        left: 30px;
        top: 7px;
      }
    }
  }

  .back {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 33px;
    display: flex;
    text-align: center;
    align-items: center;

    img {
      width: 10px;
      height: 18px;
    }

    span {
      flex: 1;
    }
  }

  .tabDetail-title {
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #9e6610;
    line-height: 37px;
    margin-bottom: 7px;
    margin-top: 100px;
  }

  .tabDetail-subtitle {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(158, 102, 16, 0.65);
    line-height: 20px;
    margin-bottom: 31px;
  }

  .tabDetail .schools {
    width: 100%;
  }

  .schools {
    position: relative;
    margin-top: 20px;
    background: #ffffff;
    // border: 1px solid red;

    .tab {
      position: absolute;
      top: -45px;
      width: 346px;
      height: 60px;
      left: 50%;
      margin-left: -173px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .schools-wrap {
      margin-top: 39px;
    }
  }
}

.san-box {
  .san-box-wrap {
    position: relative;
    height: 99px;
    background-size: 100% 100%;
    border-radius: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;

    .san-box-wrap-left {
      flex: 0 0 77px;
      width: 77px;
      height: 77px;
      margin-right: 16px;
      margin-left: 12px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }
    }

    .san-box-wrap-right {
      .san-box-wrap-right-top {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 21px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 160px;
      }

      .san-box-wrap-right-bot {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3f3e3e;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding-right: 30px;
      }
    }

    .san-box-wrap-top {
      position: absolute;
      top: 16px;
      right: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      padding: 4px 12px;
      line-height: 14px;
      border-radius: 11px;
      background: #ffffff;
    }
  }
}
</style>
